<template>
  <map-core-normal :single-mode="false" :mapOptions="getMapOptions" v-bind="$attrs">
    <!--  expandZoomRange: true 必须传 -->
    <template #default="scope">
      <img
        :src="icon"
        style="position: absolute; right: 5px; bottom: 5px; z-index: 2; width: 40px; height: 40px; cursor: pointer"
        @click="toggle"
      />
      <slot v-bind="scope" />
    </template>
  </map-core-normal>
</template>

<script>
import MapCoreNormal from './map-core-normal.vue';
import { useFullscreen } from '@vueuse/core';

export default {
  name: 'PopupBaseMap',
  components: { MapCoreNormal },
  props: {
    mapStyleKey: { type: String, default: undefined },
    mapOptions: { type: [Object, Function], default: undefined },
  },
  data() {
    return {
      fullscreen: null,
    };
  },
  mounted() {
    this.fullscreen = useFullscreen(this.$el);
  },
  computed: {
    icon() {
      // isFullscreen默认为false
      const name = this.fullscreen.isFullscreen ? 'fullscreen-exit' : 'fullscreen';
      return new URL(`../../assets/${name}.png`, import.meta.url).href;
    },
  },
  methods: {
    getMapOptions() {
      const opt = {
        mapStyle: this.mapStyleKey,
        expandZoomRange: true,
        zooms: [3, 24],
        viewMode: '2D',
        features: ['bg', 'point', 'road'],
      };
      const option = typeof this.mapOptions === 'function' ? this.mapOptions() : this.mapOptions;
      return Object.assign({}, opt, option);
    },
    toggle() {
      this.fullscreen.toggle();
    },
  },
};
</script>

<style lang="less"></style>
